<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
.bread-name {
  font-size: 12px;
  padding: 20px 30px 7px 30px;
  box-sizing: border-box;
  line-height: 13px;
}

.bread-item {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
  &:before {
    content: "/";
    display: inline-block;
    margin: 0 5px;
  }
}

.home-text {
  &:hover {
    text-decoration: underline;
  }
  cursor: pointer;
}

.back {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
    i {
      text-decoration: underline;
    }
  }
}
</style>

<template>
  <div class="bread-name"
       @click="clearFiles">
    <div v-if="!breadNameList.length">全部文件</div>
    <div v-else>
      <span @click="back"
            class="back">
        <i class="el-icon-back"></i>
        返回
        <el-divider direction="vertical"></el-divider>
      </span>
      <span class="home-text"
            @click="goHome">首页</span>
      <span v-for="(breadItem,breadIndex) in breadNameList"
            @click="goItem(breadItem,breadIndex)"
            class="bread-item">
        {{breadItem}}
      </span>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["breadNameList"])
  },
  data() {
    return {};
  },
  methods: {
    // 清空 checkfiles
    clearFiles() {
      this.$store.commit("file/CLEAR_FILES");
    },
    back() {
      this.$store.dispatch("file/back");
    },
    goHome() {
      this.$store.dispatch("file/goRoot");
    },
    goItem(item, index) {
      if (index === this.breadNameList.length - 1) {
        return;
      }
      this.$store.dispatch("file/goItem", index);
    }
  }
};
</script>
